<template>
  <ul class='sub-menu'>
    <template v-for='route in routes' :key="route.id">
      <li :class='route.attribute+" "+"menu-item"'>
        <a :href='route.path' :title='route.name'>{{ route.name }}</a>
        <ul v-if='route.children.length !== 0' class='sub-menu'>
          <template v-for='item in route.children'>
            <li :class='item.attribute'>
              <a :href='item.path' aria-current="page" id='menu-item-children' :target='item.target ===1 ? "_blank":""'>{{ item.name }}</a>
            </li>
          </template>
        </ul>
      </li>
    </template>
  </ul>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'SubMenu',
  props: {
    routes: {
      type: Array,
      requried: true
    },
  },
  setup(){}
})
</script>

